<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '200px' }">
    <div class="comBox">
      <textarea rows="5" v-model="value" :placeholder="placeholder"></textarea>
      <span :class="{ disable: value.length === 0 }" @click="send">发送</span>
    </div>
  </van-popup>
</template>

<script>
// 导入接口
import { apiExperienceReply } from '@/api/find.js'
export default {
  watch: {
    show (value) {
      if (value) {
        if (this.type === 'art') {
          this.placeholder = '我来补充几句'
        } else if (this.type === 'com') {
          this.placeholder = '回复:' + this.data.author.nickname
        }
      }
    }
  },
  data () {
    return {
      type: 'art', // art 文章评论 com 评论回复
      // 回复的 文章评论 或者 评论回复 数据
      data: null,
      // 评论弹框
      show: false,
      value: '',
      // 占位符
      placeholder: '我来补充几句'
    }
  },
  methods: {
    async send () {
      if (this.value.length) {
        // 关闭弹框
        this.show = false
        // 加载效果
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        })
        const artid = this.$route.params.id
        const obj = { content: this.value, article: artid }
        // 请求接口
        if (this.type === 'art') {
          const res = await apiExperienceReply(obj)
          this.$parent.artComments.unshift(res.data)
          // this.data = [res.data, ...this.data]
          // 评论回复
        } else if (this.type === 'com') {
          obj.parent = this.data.id
          const res = await apiExperienceReply(obj)
          this.data.children_comments.unshift(res.data)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.comBox {
  padding: 15px;
  text-align: right;
  textarea {
    width: 100% !important;
    background-color: #f7f4f5;
    margin-top: 15px;
    padding: 15px;
    border: none;
    resize: none;
    font-size: 14px;
    border-radius: 15px;
  }
  span {
    font-size: 16px;
    color: red;
  }
  .disable {
    color: #b4b4bd;
  }
}
</style>
